<template>
    <div class="left-menu-stage">
            <div class="left-menu-scene">
                <div class="menu-title">
                    <span>{{titleText}}</span>
                </div>
                <div class="menu-list">
                    <a-menu style="width: 208px;background-color:#efefef;" :default-selected-keys="[0]" :open-keys.sync="openKeys"
                            mode="inline">
                        <a-menu-item @click="handleClick(item)" :key="index" v-for="item,index in categories">
                            <div class="nav-title" :class="{active:item.active==true}">{{item.title}}</div>
                        </a-menu-item>
                    </a-menu>
                </div>
            </div>
        </div>
</template>

<script>

    export default {
        name: "sidebar",
        props: {
            titleText:{
                type: String,
                default() {
                    return '侧边栏标题';
                }
            },
            categories:{
                type:Array,
                default(){
                    return [
                        {title:'侧边菜单一',route:{name:'',params:{}}},
                        {title:'侧边菜单二',route:{name:'',params:{}}},
                        {title:'侧边菜单三',route:{name:'',params:{}}},
                        {title:'侧边菜单四',route:{name:'',params:{}}},
                    ];
                }
            }
        },
        data(){
            return {
                openKeys: ['sub1'],
                current:[],
            }
        },
        watch: {
            openKeys(val) {
                console.log('openKeys', val);
            },
            titleText(val){
                this.titleText = val;
            },
            categories(val){
                this.categories = val;
            },
            $route(item){
                //console.log(item);
            }
        },
        methods:{
            handleClick(item){
                console.log(item);
                if(item.route.name){
                    console.dir(item.route.params);
                    this.$router.push({name:item.route.name,params:item.route.params,query:item.route.query});
                }else
                    this.$router.push({path:item.route.path,query:item.route.query});
            }
        }
    }
</script>
<style scoped>
</style>